/** vite的插件 */
import vuePlugin from "@vitejs/plugin-vue"
import { compression } from "vite-plugin-compression2"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import ElementPlus from "unplugin-element-plus/vite"

/** postcss插件 */
// @ts-ignore
import pxtoremPlugin from "postcss-plugin-px2rem"
import autoprefixerPlugin from "autoprefixer"
import tailwindcssPlugin from "tailwindcss"
import postcssPresetEnvPlugin from "postcss-preset-env"

export const vitePlugins = [
  vuePlugin(),
  compression({ threshold: 10240, algorithm: "gzip", filename: ".gz", deleteOriginalAssets: true }),
  AutoImport({
    resolvers: [ElementPlusResolver()]
  }),
  Components({
    resolvers: [ElementPlusResolver()]
  }),
  ElementPlus()
]

export const postcssPlugins = [
  postcssPresetEnvPlugin(),
  tailwindcssPlugin,
  autoprefixerPlugin(),
  pxtoremPlugin({
    rootValue: 1, // 基数，以1920设计稿为样本，是多少px直接写多少px
    unitPrecision: 5, // 精准小数位
    propWhiteList: [], // 白名单
    propBlackList: [], // 黑名单
    exclude: false, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
    // selectorBlackList: [], //要忽略并保留为px的选择器
    // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
    // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
    mediaQuery: false, //（布尔值）允许在媒体查询中转换px
    minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
  })
]
